import React, { Component } from "react";
import { Route, NavLink, Switch,Redirect } from "react-router-dom";
import "./index.scss";
import StateDemo from "../pages/ClassCom/StateDemo";
import StateCom from "../pages/ClassCom/StateCom";
import EventDemo from "../pages/ClassCom/EventDemo";
import ComConent from "../pages/ClassCom/ComConent";
import RefDemo from "../pages/ClassCom/RefDemo";
import DoubleBinding from "../pages/ClassCom/DoubleBinding/Index";
import TodoList from "../pages/ClassCom/TodoList/TodoList";
import Lifecycle from "../pages/ClassCom/Lifecycle";
import Optimization from "../pages/ClassCom/Optimization";
import SonToParent from "@/pages/ClassCom/ComChuan/SonToParent/Index";
import SonToSon from "@/pages/ClassCom/ComChuan/SonToSon/Index";
import ContextTree from "@/pages/ClassCom/ComChuan/ContextTree/Index";
import ReduxBaseDemo from "@/pages/ReduxDemo/ReduxBaseDemo";
import ReduxBaseDemo02 from "@/pages/ReduxDemo/ReduxBaseDemo02";
import ReduxBaseDemo03 from "@/pages/ReduxDemo/ReduxBaseDemo03";
import ReactReduxDemo from "@/pages/ReduxDemo/ReactReduxDemo";
import HOCDemo from "@/pages/HOCDemo";
import RouterToValue from "@/pages/RouterDemo/RouterToValue/List";
import Detail from "@/pages/RouterDemo/RouterToValue/Detail";
import useStateDemo from "@/pages/FuncCom/Hooks/useStateDemo";

import useEffectDemo from "@/pages/FuncCom/Hooks/useEffectDemo";
import useCallBackDemo from "@/pages/FuncCom/Hooks/useCallBackDemo";
import useMemoDemo from "@/pages/FuncCom/Hooks/useMemoDemo";
import useRefDemo from "@/pages/FuncCom/Hooks/useRefDemo";
import useContextDemo from "@/pages/FuncCom/Hooks/useContextDemo/Index";
import useReducerDemo from "@/pages/FuncCom/Hooks/useReducerDemo/index";
import useTransitionDemo from "@/pages/FuncCom/Hooks/useTransitionDemo/index";
import useDebugValueDemo from "@/pages/FuncCom/Hooks/useDebugValueDemo/index";
import useIdDemo from "@/pages/FuncCom/Hooks/useIdDemo/index";
import useDeferredValueDemo from "@/pages/FuncCom/Hooks/useDeferredValueDemo/index";
import useSyncExternalStoreDemo from "@/pages/FuncCom/Hooks/useSyncExternalStoreDemo/index";
import useInsertionEffectDemo from "@/pages/FuncCom/Hooks/useInsertionEffectDemo/index";
import myHooksDemo from "@/pages/FuncCom/myHooks";



export default class index extends Component {
  render() {
    return (
      <div className="contianer">
        <ul className="menu-box">
          <li>
            <NavLink to="/Admin/StateDemo" > 类组件的state</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/StateCom"  > 有状态和无状态组件</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/EventDemo"> 事件处理</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/ComConent"> 组件的内容</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/RefDemo"> Ref</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/DoubleBinding"> 双向绑定</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/TodoList"> TodoList</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/Lifecycle"> 生命周期</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/Optimization"> 性能优化</NavLink>
          </li>
          <li>
            <span>组件间传值</span>
            <ul>
              <li>
                <NavLink to="/Admin/SonToParent"> 子---》父</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/SonToSon"> 兄弟之间（非父子）</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/ContextTree"> 跨级（状态树）</NavLink>
              </li>
            </ul>
          </li>
          <li>
            <span>Redux</span>
            <ul>
              <li>
                <NavLink to="/Admin/ReduxBaseDemo"> Redux的基本使用</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/ReduxBaseDemo02"> Redux提取action</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/ReduxBaseDemo03"> Redux提取reducer</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/ReactReduxDemo"> react-redux</NavLink>
              </li>
            </ul>
          </li>

          <li>
            <NavLink to="/Admin/HOCDemo"> 高阶组件</NavLink>
          </li>
          <li>
            <NavLink to="/Admin/RouterToValue"> 路由传参</NavLink>
          </li>
          <li>
            <span>Hooks</span>
            <ul>
              <li>
                <NavLink to="/Admin/useStateDemo"> useState</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useEffectDemo"> useEffect</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useCallBackDemo"> useCallBack</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useMemoDemo"> useMemo</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useRefDemo"> useRef</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useContextDemo"> useContext</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useReducerDemo"> useReducer</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useTransitionDemo"> useTransition</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useDebugValueDemo"> useDebugValue</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useIdDemo"> useId</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useDeferredValueDemo"> useDeferredValue</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useSyncExternalStoreDemo"> useSyncExternalStore</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/useInsertionEffectDemo"> useInsertionEffect</NavLink>
              </li>
              <li>
                <NavLink to="/Admin/myHooksDemo"> 自定义hooks</NavLink>
              </li>
              
            </ul>
          </li>

        </ul>
        <div className="content-box">
          <Switch>
            <Redirect exact={true} from="/Admin" to="/Admin/TodoList"></Redirect>
            <Route path="/Admin/StateDemo" component={StateDemo}></Route>
            <Route path="/Admin/StateCom" component={StateCom}></Route>
            <Route path="/Admin/EventDemo" component={EventDemo}></Route>
            <Route path="/Admin/ComConent" component={ComConent}></Route>
            <Route path="/Admin/RefDemo" component={RefDemo}></Route>
            <Route
              path="/Admin/DoubleBinding"
              component={DoubleBinding}
            ></Route>
            <Route path="/Admin/TodoList" component={TodoList}></Route>
            <Route path="/Admin/Lifecycle" component={Lifecycle}></Route>
            <Route path="/Admin/Optimization" component={Optimization}></Route>
            <Route path="/Admin/SonToParent" component={SonToParent}></Route>
            <Route path="/Admin/SonToSon" component={SonToSon}></Route>
            <Route path="/Admin/ContextTree" component={ContextTree}></Route>
            <Route
              path="/Admin/ReduxBaseDemo"
              component={ReduxBaseDemo}
            ></Route>
            <Route
              path="/Admin/ReduxBaseDemo02"
              component={ReduxBaseDemo02}
            ></Route>
            <Route
              path="/Admin/ReduxBaseDemo03"
              component={ReduxBaseDemo03}
            ></Route>
            <Route
              path="/Admin/ReactReduxDemo"
              component={ReactReduxDemo}
            ></Route>
            <Route path="/Admin/HOCDemo" component={HOCDemo}></Route>
            <Route path="/Admin/RouterToValue" component={RouterToValue}></Route>
            <Route path="/Admin/Detail" component={Detail}></Route>
            <Route path="/Admin/useStateDemo" component={useStateDemo}></Route>
            <Route path="/Admin/useEffectDemo" component={useEffectDemo}></Route>
            <Route path="/Admin/useCallBackDemo" component={useCallBackDemo}></Route>
            <Route path="/Admin/useMemoDemo" component={useMemoDemo}></Route>
            <Route path="/Admin/useRefDemo" component={useRefDemo}></Route>
            <Route path="/Admin/useContextDemo" component={useContextDemo}></Route>
            <Route path="/Admin/useReducerDemo" component={useReducerDemo}></Route>
            <Route path="/Admin/useTransitionDemo" component={useTransitionDemo}></Route>
            <Route path="/Admin/useDebugValueDemo" component={useDebugValueDemo}></Route>
            <Route path="/Admin/useIdDemo" component={useIdDemo}></Route>
            <Route path="/Admin/useDeferredValueDemo" component={useDeferredValueDemo}></Route>
            <Route path="/Admin/useSyncExternalStoreDemo" component={useSyncExternalStoreDemo}></Route>
            <Route path="/Admin/useInsertionEffectDemo" component={useInsertionEffectDemo}></Route>
            <Route path="/Admin/myHooksDemo" component={myHooksDemo}></Route>
            
          </Switch>
          
        <hr/>
        </div>
      </div>
    );
  }
}
